<template>
  <div class="listView">
    <div class="listItem">
      <div class="card">
        <img src="../../assets/img/book.jpg" class="book" />
      </div>
      <div class="content">
        <div class="itemTitle">书名：{{data.bookName}}</div>
        <div class="itemContent">作责：{{data.author}}</div>
        <div class="itemContent">出版社：{{data.publisher}}</div>
        <!-- <div class="itemContent">出版日期：{{data.publicationDate}}</div> -->
        <div class="itemContent">借阅日期：{{data.startDate}}</div>
        <div class="itemContent">到期日期：{{data.endDate}}</div>
        <div class="itemContent">是否归还：{{data.statusTxt}}</div>
        <div class="itemAction">
          <div class="button">
            <button @click="goSacnDeal('view')" v-show="data.status=='0'||data.status=='2'">申请延期</button>
          </div>
        </div>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>
<script>
export default {
  //工单号GD210401001 已经超过24小时未处理完成,请尽快处理
  name: "workOrderItem",
  props: {
    data: {
      type: Object,
      QR_CODE: '',
    },
  },
  data() {
    return {};
  },
  methods: {
    goDetial(action) {
      let arg = JSON.stringify(this.data);
      this.$router.push({
        name: "workOrderDetial",
        query: { param: arg },
      });
    },
    goBroower(id) {
      const token = this.$store.state.token;
      let that = this;
      if (token == null || null == '') {
        this.$vux.alert.show({
          title: '提示',
          content: '尚未登录请登录',
          onShow() {
          },
          onHide() {
            that.$router.push("login");
          }
        })
      } else {
        // this.$router.push("book");
        this.$router.push({ name: "book", params: { bookId: id } });
      }
    },
    goSacnDeal(action) {
      //this.$router.push("workOrderDeal");
      Android.ScanQrCode("toast");
    },
    scanclick() {
      // callJsFunction(this.QR_CODE);
      if (Android) {
        let str = Android.ScanQrCode("toast");
      } else {
        if (this.QR_CODE) {
          callJsFunction(this.QR_CODE);
        }
      }
    },
    callJsFunction(barcode) {
      this.QR_CODE = barcode;
    },
  },
  created() { },
  computed: {},
  mounted() { window.callJsFunction = this.callJsFunction; },
};
</script>
<style lang="less" scoped>
.listView {
  width: 95%;
  padding: 10px;
  .noData {
    padding: 40px;
    text-align: center;
  }
  .listItem {
    // padding: 15px 5px;
    border: 1px solid rgba(26, 47, 66, 0.1);
    background: #ffffff;
    box-shadow: 0 4px 16px 0 rgba(26, 47, 66, 0.1);
    height: 190px;
    .card {
      align-items: center;
      padding: 5px;
      width: 130px;
      float: left;
      .book {
        height: 175px;
      }
      .warn {
        width: 14px;
        height: 14px;
      }
      .titleText {
        margin-left: 180px;
        color: rgba(0, 0, 0, 0.4);
        font-size: 14px;
        margin-right: 145px;
        width: auto;
      }
      .timeText {
        width: 145px;
        float: right;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
    .content {
      margin-left: 100px;
      width: auto;
      .itemContent {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      .itemTitle {
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: bold;
        height: 35px;
        line-height: 35px;
      }
      .itemAction {
        margin-left: 32px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.6);
        button {
          background: #ffffff;
          border: 1px solid #1478ee;
          height: 32px;
          width: 68px;
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #1478ee;
        }
        .userName {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.4);
          width: auto;
        }
        .location {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          width: auto;
          font-weight: bold;
          margin-right: 150px;
          line-height: 20px;
        }
        .button {
          width: 85px;
          float: right;
          display: flex;
          text-align: right;
          button {
            margin-left: 10px;
          }
        }
        .locationdeal {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          width: auto;
          font-weight: bold;
        }
        .buttondeal {
          width: 80px;
          float: right;
        }
      }
    }
  }
}
</style>